<template>
    <div class="jpGoods" id="bg">
        <div class="container">
            <Title/>
            <goods-info :goodsList="goodsList"/>
            <jp-person-list :goodsList="goodsList"/>
            <goods-refer :goodsList="goodsList"/>
            <massage-board/>
        </div>
    </div>
</template>

<script>
    import Title from './Title'
    import GoodsInfo from './GoodsInfo'
    import MassageBoard from './MassageBoard'
    import GoodsRefer from './GoodsRefer'
    import JpPersonList from './JpPersonList'
    import { mapState,mapGetters } from "vuex";
    export default {
        name:'GoodsInfrom',
        components:{
            Title,
            MassageBoard,
            JpPersonList,
            GoodsRefer,
            GoodsInfo,
        },
        data() {
            return {
                // goodsList:[]
            }
        },
        mounted() {
            this.$store.dispatch("getCommodityList");
            this.$store.dispatch("getGoodsList");
            this.$store.dispatch("getAllGoodsPublist");
            // this.getGoodsList()
            // console.log("n",this.goodsList)
            // console.log("a",this.list,this.$store,this.$route.params.id)
        },
        methods: {
            // getGoodsList(){
            //     this.goodsList = this.$store.getters.getGoodsform(this.$route.params.id)
            // }
        },
        computed:{
            ...mapState({
              commodityList: (state) => state.inform.commodityList,
              getGoodsList:(state) => state.inform.getGoodsList,
              allgoodspublist:(state) => state.inform.allgoodspublist
            }),
            goodsList:function(){
                return this.$store.getters.getGoodsform(this.$route.params.id)
            }
        },
    }
</script>

<style >
.jpGoods{
    margin-top: 10px;
    width: 100%;
    height: 1800px;
    background-color: skyblue;
    position: relative;
}
.container{
  width: 1050px;
  height: 100%;
  margin: 0 auto;
  background-color: #fff;
}
</style>